<template>
  <div id="index" class="one">
    <!-- <dv-full-screen-container class="bg" > -->
    <!-- <div class="one"> -->
    <div>
      <dv-border-box-12 class="a">
       <topLeft></topLeft>
      </dv-border-box-12>
    </div>
    <div class="b">
      <geoworld></geoworld>
    </div>
    

    <dv-border-box-12 class="c">
      <top-rate></top-rate>
    </dv-border-box-12>
    <dv-border-box-12 class="d">
      <buttomLeft></buttomLeft>
    </dv-border-box-12>
    
    <dv-border-box-12 class="e">
      <evenlist></evenlist>
    </dv-border-box-12>
    <dv-border-box-12 class="f">
      <buttomRate></buttomRate>
    </dv-border-box-12>

    <!-- </div> -->

    <!-- <div class="one">
        <dv-border-box-12>
          
        </dv-border-box-12>
      </div> -->
    <!-- </dv-full-screen-container>   -->
  </div>
</template>

<script>
import TopLeft from "./mapandrank/topLeft.vue";

import ButtomRate from './mapandrank/buttomRate.vue'
import ButtomLeft from "./mapandrank/buttomLeft.vue";
import Geoworld from '../components/aptmap/geoworld.vue';
import TopRate from './mapandrank/topRate.vue';
import Evenlist from '../components/aptlist/evenlist.vue';

export default {
  
  components: { Geoworld,TopLeft,ButtomLeft,ButtomRate, TopRate,Evenlist },
  // components: { abilityrank, Industry },
};
</script>

<style scoped>
.one {
  /* margin-top: 0.125rem; */
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
  grid-template-areas:
    "a b b c"
    "d e e f";
 
}

.a {
  grid-area: a;
  justify-items: center;

}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
  
}
.e {
  grid-area: e;
  
}
.f {
  grid-area: f;
  
}

</style>